<script setup lang="ts">
import Aside from '@/layout/console/AsideLayout.vue'
import Header from '@/layout/console/HeaderLayout.vue'
import Content from '@/layout/console/ContentLayout.vue'
import Footer from '@/layout/console/FooterLayout.vue'
</script>

<template>
  <t-layout style="overflow: hidden">
    <t-aside width="auto" style="height: 100vh"><Aside /></t-aside>
    <t-layout style="width: calc(100vw - 64px)">
      <t-header><Header /></t-header>
      <t-content class="content"><Content /></t-content>
      <t-footer class="footer"><Footer /></t-footer>
    </t-layout>
  </t-layout>
</template>

<style scoped lang="sass">
.content
  height: calc(100vh - 48px - 50px)
  overflow: auto
  padding: 20px
  box-sizing: border-box
.footer
  background-color: var(--td-bg-color-container)
  height: 50px
  padding: 0
</style>
